<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
	<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
	<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
	<style>
		div.buyPageDiv {
			margin: 20px auto;
			max-width: 1013px;
		}
		div.addressTip, div.productListTip {
			color: #333333;
			font-size: 16px;
			font-weight: bold;
			text-align: left;
			margin-bottom: 30px;
		}
		table.productListTable {
			width: 100%;
			border-collapse: collapse;
			font-size: 12px;
		}
		table.productListTable th {
			color: #999999;
			font-family: 宋体;
			font-weight: normal;
			font-size: 12px;
			text-align: center;
			padding-bottom: 5px;
		}
		table.productListTable tr.rowborder td {
			background-color: #B2D1FF;
			border-right: 2px solid #FFFFFF;
			height: 3px;
		}
		th.productListTableFirstColumn {
			text-align: left !important;
		}
		img.tmallbuy {
			width: 15px;
		}
		a.marketLink {
			color: black;
			font-size: 12px;
			font-family: 宋体;
			font-weight: normal;
		}
		a.marketLink:hover {
			color: black;
			font-size: 12px;
			text-decoration: none;
			font-family: 宋体;
			font-weight: normal;
		}
		span.wangwangGif {
			display: inline-block;
			width: 25px;
			height: 25px;
			background-image: url("https://how2j.cn/tmall/img/site/wangwang.gif");
			background-repeat: no-repeat;
			background-color: transparent;
			background-attachment: scroll;
			background-position: -83px -0px;
			position: relative;
			top: 8px;
			left: 2px;
		}
		tbody.productListTableTbody td {
			text-align: center;
		}
		tbody.productListTableTbody td.orderItemFirstTD {
			text-align: left;
		}
		tr.orderItemTR td {
			border-bottom: 1px solid #E5E5E5;
			padding: 10px 0;
		}
		img.orderItemImg {
			width: 50px;
			height: 50px;
			border: 1px solid #E9E9E9;
		}
		td.orderItemProductInfo {
			text-align: left !important;
		}
		td.orderItemProductInfo img {
			height: 16px;
		}
		a.orderItemProductLink {
			color: #666666;
			display: block;
		}
		a.orderItemProductLink:hover {
			color: #666666;
			text-decoration: underline;
		}
		span.orderItemProductPrice, span.orderItemProductNumber {
			color: #000000;
		}
		span.orderItemUnitSum {
			color: #CC0000;
			font-weight: bold;
		}
		td.orderItemFirstTD, td.orderItemLastTD {
			border-bottom: 0px solid black !important;
		}
		label.orderItemDeliveryLabel {
			color: #666666;
			font-family: 宋体;
			font-size: 12px;
			font-weight: normal;
		}
		select.orderItemDeliverySelect {
			width: 100px;
			height: 23px;
		}
		div.orderItemSumDiv {
			background-color: #F2F6FF;
			padding: 20px;
			border-top: 2px solid #B4D0FF;
			height: 50px;
		}
		div.orderItemSumDiv span {
			 color: #999999;
		}
		span.leaveMessageText {
			display: inline-block;
			margin-right: 10px;
			float: left;
		}
		div.orderItemTotalSumDiv {
			margin: 40px;
			height: 40px;
		}
		div.submitOrderDiv {
			height: 40px;
			margin: 20px 0;
		}
		div.orderItemTotalSumDiv span {
			color: #999999;
		}
		span.orderItemTotalSumSpan {
			color: #C40000 !important;
			font-size: 22px;
			font-weight: bold;
			border-bottom: 1px dotted #F2F6FF;
		}
		button.submitOrderButton {
			border: 1px solid #C40000;
			background-color: #C40000;
			text-align: center;
			line-height: 40px;
			font-size: 14px;
			font-weight: bold;
			color: white;
			float: right;
			display: inline-block;
			margin: 0 10px;
			width: 180px;
			height: 40px;
		}
		body {
			font-size: 12px;
			font-family: Arial;
		}
	</style>
	<script>
		$(function () {
		    $("img.leaveMessageImg").click(function () {
		        $(this).hide();
		        $("span.leaveMessageTextareaSpan").show();
		        $("div.orderItemSumDiv").css("height", "100px");
            });
        });
	</script>
</head>
<body>
	<div class="buyPageDiv">
		<div class="productList">
			<div class="productListTip">确认订单信息</div>
			<table class="productListTable">
				<thead>
					<tr>
						<th class="productListTableFirstColumn" colspan="2">
							<img src="https://how2j.cn/tmall/img/site/tmallbuy.png" class="tmallbuy">
							<a href="#nowhere" class="marketLink">店铺：天猫店铺</a>
							<a href="#nowhere" class="wangwanglink"> <span class="wangwangGif"></span> </a>
						</th>
						<th>单价</th>
						<th>数量</th>
						<th>小计</th>
						<th>配送方式</th>
					</tr>
					<tr class="rowborder">
						<td colspan="2"></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
				</thead>
				<tbody class="productListTableTbody">
					<tr class="orderItemTR">
						<td class="orderItemFirstTD"><img width="20px"  src="https://how2j.cn/tmall/img/productSingle_middle/4206.jpg" class="orderItemImg"></td>
						<td class="orderItemProductInfo">
							<a class="orderItemProductLink" href="#nowhere">
								Philips/飞利浦 HR1897/30破壁微榨原汁机 多功能家用果汁榨汁机
							</a>
							<img title="支持信用卡支付" src="https://how2j.cn/tmall/img/site/creditcard.png">
							<img title="消费者保障服务,承诺7天退货" src="https://how2j.cn/tmall/img/site/7day.png">
							<img title="消费者保障服务,承诺如实描述" src="https://how2j.cn/tmall/img/site/promise.png">
						</td>
						<td>
							<span class="orderItemProductPrice">￥3,514.05</span>
						</td>
						<td>
							<span class="orderItemProductNumber">2</span>
						</td>
						<td><span class="orderItemUnitSum">
						￥7,028.10
						</span></td>
						<td class="orderItemLastTD" rowspan="5">
							<label class="orderItemDeliveryLabel">
								<input type="radio" checked="checked" value="">
								普通配送
							</label>
							<select class="orderItemDeliverySelect">
								<option>快递 免邮费</option>
							</select>
						</td>
					</tr>
					<tr class="orderItemTR">
						<td class="orderItemFirstTD"><img width="20px"  src="https://how2j.cn/tmall/img/productSingle_middle/3796.jpg" class="orderItemImg"></td>
						<td class="orderItemProductInfo">
							<a class="orderItemProductLink" href="#nowhere">
								公众智能扫地机器人家用全自动电动清洁地毯擦拖地一体机吸尘器
							</a>
							<img title="支持信用卡支付" src="https://how2j.cn/tmall/img/site/creditcard.png">
							<img title="消费者保障服务,承诺7天退货" src="https://how2j.cn/tmall/img/site/7day.png">
							<img title="消费者保障服务,承诺如实描述" src="https://how2j.cn/tmall/img/site/promise.png">
						</td>
						<td>
							<span class="orderItemProductPrice">￥2,124.15</span>
						</td>
						<td>
							<span class="orderItemProductNumber">1</span>
						</td>
						<td><span class="orderItemUnitSum">
						￥2,124.15
						</span></td>
					</tr>
				</tbody>
			</table>
			<div class="orderItemSumDiv">
				<div class="pull-left">
					<span class="leaveMessageText">给卖家留言:</span>
					<span><img src="https://how2j.cn/tmall/img/site/leaveMessage.png" class="leaveMessageImg"></span>
					<span class="leaveMessageTextareaSpan" style="display: none;">
					<textarea class="leaveMessageTextarea" name="userMessage"></textarea>
					<div>
						<span>还可以输入200个字符</span>
					</div>
				</span>
				</div>
				<span class="pull-right">店铺合计(含运费): ￥9,152.25</span>
			</div>
		</div>
		<div class="orderItemTotalSumDiv">
			<div class="pull-right">
				<span>实付款：</span>
				<span class="orderItemTotalSumSpan">￥9,152.25</span>
			</div>
		</div>
		<div class="submitOrderDiv">
			<button class="submitOrderButton" type="button">提交订单</button>
		</div>
	</div>
</body>
</html>